import React from 'react'
import '@/assets/reset.scss'
import '@/assets/cnodelist.scss'

export default class CnodeList extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      // list 是用于存放个人发表的数据
      list: [],
      index: 1,
      tab: '',
      page: 1,
      tabs: [
        {id: 1, value: 'all', label: '全部'},
        {id: 2, value: 'good', label: '精华'},
        {id: 3, value: 'share', label: '分享'},
        {id: 4, value: 'ask', label: '问答'},
        {id: 5, value: 'job', label: '招聘'},
        {id: 6, value: 'dev', label: '客户端测试'}
      ]
    }
  }

  componentDidMount () {
    this.init()
  }

  init () {
    let { tab, page } = this.state
    const params = {
      page,
      tab,
      limit: 10,
      mdrender: false
    }
    React.$api.fetchTopics(params).then(res => {
      this.setState({
        list: res
      })
    })
  }

  // 用于切换tab栏
  change (item) {
    let { page } = this.state

    if ( page !== 1) page = 1
    this.setState({
      index: item.id,
      tab: item.value,
      page
    }, () => {
      this.init()
    })
  }

  // 页码之间的算法
  pages () {
    let { page } = this.state
    return page <= 3 ? [1, 2, 3, 4, 5] : [page - 2, page - 1, page, page + 1, page + 2]
  }

  // 页码减小
  sub () {
    let { page } = this.state
    if (page <= 1) return alert('已经是第一页了')
    this.setState({
      page: page - 1
    }, () => this.init())
  }

  // 页码加大
  add () {
    let { page } = this.state
    this.setState({
      page: page + 1
    }, () => this.init())
  }

  // 改变当前的页码
  changePage (n) {
    this.setState({
      page: n
    }, () => this.init())
  }

  // 选项卡类别的英文装换为中文字符
  tabFilter (val) {
    let { tabs } = this.state
    let res
    tabs.map(item => {
      if (item.value == val) res = item.label
    })

    return res
  }

  // 时间格式进行处理
  format (val) {
    var t = (Date.now() - Date.parse(val)) / (24 * 60 * 60 * 1000)
    return (t >= 1 ? (t >= 30 ? (Math.round(t / 30) + '月前') : (Math.round(t) + '天前')) : (t * 24 >= 1 ? (Math.round(t * 24) + '小时前') : (Math.round(t * 24 * 60) + '分钟前')))
  }

  render () {
    let { index, list, page, tabs } = this.state

    return (
      <div id="cnode">
        <header>
          {
            tabs.map(item => (
              <span 
                key={ item.id }
                className={ item.id == index ? 'active' : '' }
                onClick={ () => this.change(item) }
              >
                { item.label }
              </span>
            ))
          }
        </header>
        <main>
          {
            list.map(item => (
              <div className='list' key={ item.id }>
                <img src={ item.author.avatar_url } alt=""/>
                <div className='personCount'>
                  { item.reply_count + '/' + item.visit_count }
                </div>
                { 
                  item.top ? 
                  <span className='hot'>顶置</span> : 
                  <span className='nohot'>{ this.tabFilter(item.tab) }</span> 
                }
                <p className='content'>{ item.title }</p>
                <span className='time'>{ this.format(item.last_reply_at) }</span>
              </div>
            ))
          }

          {/* 
            需要研究这里所使用的算法
            n = 1  <<  1    2   3   4   5  ...      >>
            n = 2  <<  1    2   3   4   5  ...      >>
            n = 3  <<  1    2   3   4   5  ...      >>
            n = 4  << ...   2   3   4   5   6   ... >>
            n = 5  << ...   3   4   5   6   7   ... >>
            n = 6  << ...   4   5   6   7   8   ... >>
            n = 7  << ...   5   6   7   8   9   ... >>

            n = 4    n-3  n-2  n-1  n  n+1 n+2
            n = 5    n-3  n-2  n-1  n  n+1 n+2

          */}
          <div className="page">
            <span 
              onClick={ () => this.sub() }
            >
              { '<<' }
            </span>
            { page > 3 && <span>...</span> }
            {
              this.pages().map(n => (
                <span 
                  key={ n } 
                  onClick={ () => this.changePage(n) }
                  className={ n === page ? 'active' : '' }
                >
                  { n }
                </span>
              ))
            }
            <span>...</span>
            <span onClick={ () => this.add() }>{ '>>' }</span>
          </div>
        </main>
      </div>
    )
  }
}